<template>
  <div class="MyTableTag">
    <div class="tagBox" @click="handleAllTag(tagList)">
      <el-tag v-for="(tag,index) in list" v-if="!(index>4)" :style="{borderColor:'rgb(0, 0, 0)',color:'#333'}"  :key="tag" class="myTag">
        {{tag}}
      </el-tag>
      <span v-if="(list.length>5)">...</span>
    </div>

  <el-dialog title="查看标签" width="600px" v-dialogDrag  :visible.sync="tagVisible" @close="tagVisible = false">
     <div style="min-height:200px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;">
         <el-tag v-for="(tag,index) in list"  :style="{borderColor:'rgb(0, 0, 0)',color:'#333'}" :key="tag"   class="myTag">
           {{tag}}
         </el-tag>
     </div>
   </el-dialog>
  </div>


</template>

<script>
 export default {
   name: "MyTableTag",
   props: {
     tagList: {
       default: null,
     },
   },
   data(){
     return{
       tagVisible:false,
       list:[]
     }
   },
   mounted() {
     if(this.tagList){
       if(typeof(this.tagList)=='string'){
          this.list = this.tagList.length?(this.tagList.split(',')):[]
       }else{
         let arr = [];
         for(let i=0;i<this.tagList.length;i++){
           arr.push(this.tagList[i].name)
         }
          this.list = arr
       }
     }else{
       this.list = [];
     }

   },
   watch: {
   	tagList: function(value) {
   		if(this.tagList){
   		  if(typeof(this.tagList)=='string'){
   		     this.list = this.tagList.length?(this.tagList.split(',')):[]
   		  }else{
   		    let arr = [];
   		    for(let i=0;i<this.tagList.length;i++){
   		      arr.push(this.tagList[i].name)
   		    }
   		     this.list = arr
   		  }
   		}else{
       this.list = [];
     }
   	}
   },
   methods:{
     handleAllTag(){
       this.tagVisible = true;
     }
   }
 }
</script>

<style lang="scss" scoped>
    .tagBox{
      cursor: pointer;
    }
    .myTag{
      margin-right:5px;
      color:#fff;
      padding: 4px 8px;
      font-size: 12px;
      line-height: 12px;
      color: #fff;
      border-radius: 2px;
      margin-right: 4px;
      width: fit-content;
      height:auto;
    }
</style>
